<script setup lang="ts">
import { appContext } from '@/models/app.context';
import { appRef } from '@/models/app.ref';
import { PromptInfo } from '@/models/prompt';
import { promptService } from '@/services/prompt.service';
import { Message } from '@arco-design/web-vue';
import { watch, onMounted, ref } from 'vue';
import { reactive } from 'vue';

const props = defineProps<{ promptid?: string }>()
const emits = defineEmits(['prompt'])
const prompts = ref([]);
const prompt = ref({} as PromptInfo);
const tags = ref([]);
watch(() => props.promptid, async () => {
  prompt.value = await appRef.prompt.get(props.promptid);
})

const loading = ref(false);
onMounted(() => {
  init();
  loading.value = true;
  promptService.promptList().then(() => {
    loading.value = false;
    init();
  })
})

const currPrompt = ref({} as PromptInfo);

async function init(): Promise<void> {
  prompts.value = await appRef.prompt.list(keyword.value, tag.value ? [tag.value] : []);
  prompt.value = await appRef.prompt.get(props.promptid);
  visible.value = false;
  tags.value = await appRef.prompt.tags();
}

const visible = ref(false);
async function onOk(): Promise<void> {
  const { id, role, value, workflow, continuous } = currPrompt.value;
  if (role && value) {
    if (id) {
      await appRef.prompt.update(currPrompt.value)
      Message.success('修改成功');
    } else {
      await appRef.prompt.add(role, value, workflow, continuous);
      Message.success('创建成功');
    }
    currPrompt.value = {} as PromptInfo;
    init();
  } else {
    Message.error("请先完善必填项");
  }
}

async function onRemove(id: string): Promise<void> {
  await appRef.prompt.remove(id);
  Message.success("删除成功")
  init();
}


const tag = ref('');
const keyword = ref("");
function onChangeTag(value: string = ''): void {
  tag.value = value;
  init();
}

</script>

<template>
  <div v-if="prompt?.id" class="prompt flex-c curr">
    <div class="role flex">
      <span class="type default" v-if="prompt.type">自定义</span>
      <span class="type custom" v-else>默认</span>
      {{ prompt?.role }}
      <icon-close-circle @click="emits('prompt', '')" size="24" />
    </div>
    <Markdown class="desc" :source="prompt.workflow || prompt.value" :convert="true" />
  </div>
  <div v-else class="flex-c prompt-box">
    <a-space wrap>
      <a-input-search :style="{ width: '210px' }" v-model="keyword" placeholder="请输入关键词" @input="init()" />
      <a-button @click="onChangeTag()" :type="tag ? 'dashed' : 'primary'"> 全部</a-button>
      <a-button v-for="item in tags" :key="item" @click="onChangeTag(item)" :type="item === tag ? 'primary' : 'dashed'">
        {{ item }}
      </a-button>
    </a-space>
    <div class="prompts grid4">
      <div class="prompt flex-c" style="justify-content: center;" @click="visible = true">
        <icon-plus />
        <span style="margin-top: 10px;"> 添加 </span>
      </div>
      <div class="prompt" :class="{ 'activity': prompt?.id === item.id }" v-for="item in prompts" :key="item.id"
        @click="emits('prompt', item.id)">
        <div class="role flex">
          <span class="type default" v-if="item.type">自定义</span>
          <span class="type custom" v-else>默认</span>
          {{ item.role }}
        </div>
        <div class="desc ellipsis3"> {{ item.workflow || item.value }}</div>
        <div class="operates" @click.stop="null" v-if="item.type">
          <icon-edit class="icon" @click="visible = true; currPrompt = JSON.parse(JSON.stringify(item))" />
          <a-popconfirm content="确认删除该prompt吗?" type="error" @ok="onRemove(item.id)">
            <icon-delete class="icon" />
          </a-popconfirm>
        </div>
        <a-space wrap style="margin-top: 8px">
          <a-tag color="blue" v-for="tag in item.tags">
            <template #icon>
              <icon-tag />
            </template>
            {{ tag }}
          </a-tag>
        </a-space>

      </div>
      <div class="prompt flex-c" style="justify-content: center;" v-if="loading">
        <a-spin tip="加载中..." />
      </div>
      <!-- <div class="prompt none" v-for="item in 10" :key="item"> </div> -->
    </div>
  </div>
  <a-modal :visible="visible" align-center @cancel="visible = false" width="50vw"
    :fullscreen="appContext.system.data.viewWidth < 1000" @ok="onOk" :title="(currPrompt?.id ? '修改' : '创建') + ' Prompt'">
    <div class="group">
      <div class="cell">
        <div class="title red-dot">角色名</div>
        <a-input class="cell" placeholder="请输入角色名" v-model="currPrompt.role" />
      </div>
      <div class="cell">
        <div class="title red-dot">prompt 的详情</div>
        <a-textarea v-model="currPrompt.value" placeholder="请输入 prompt 的详情" />
      </div>
      <div class="cell">
        <div class="title">角色的工作流描述</div>
        <a-textarea v-model="currPrompt.workflow" placeholder="建议完善该工作流，在后续使用提示更清晰" />
      </div>
      <div class="cell">
        <div class="title">作者</div>
        <a-input class="cell" v-model="currPrompt.author" placeholder="请输入作者" />
      </div>
      <div class="cell">
        <div class="title">标签</div>
        <a-select v-model="currPrompt.tags" placeholder="请选择或输入" multiple allow-create>
          <a-option v-for="tag in tags" :key="tag"> {{ tag }} </a-option>
        </a-select>
      </div>
      <div class="cell">
        <div class="title">连续对话</div>
        <a-switch v-model="currPrompt.continuous" :unchecked-value="0" :checked-value="1" />
      </div>
    </div>
  </a-modal>
</template>

<style scoped lang="scss">
.prompt-box {
  margin: 0px 10px;
  height: 60vh;

  @media screen and (max-width: 800px) {
    height: 100%;
  }
}

.prompts {
  overflow: auto;
  padding: 10px;

  @media screen and (max-width: 1500px) {
    grid-template-columns: repeat(3, 1fr);
  }

  @media screen and (max-width: 1100px) {
    grid-template-columns: repeat(2, 1fr);
  }

  @media screen and (max-width: 800px) {
    grid-template-columns: repeat(1, 1fr);
  }
}

.prompt {
  min-width: 200px;
  padding: 20px;
  border-radius: 3px;
  border: 2px solid transparent;
  box-shadow: 0 0 3px #77777763;
  cursor: pointer;
  position: relative;

  &:hover {
    border-color: rgb(var(--arcoblue-4));
  }


  .role {
    font-size: 16px;
    font-weight: 600;

    .type {
      padding: 3px 5px;
      border-radius: 3px;
      margin-right: 5px;
      color: var(--color-bg-1);
    }

    .default {
      background: rgb(var(--arcoblue-4));
    }

    .custom {
      background: rgb(var(--green-3));
    }
  }

  .desc {
    margin-top: 10px;
    line-height: 20px;
    color: var(--color-neutral-4);
  }

  .operates {
    position: absolute;
    top: 0;
    right: 0;
    padding: 6px 16px;
    border-radius: 3px;
    background: var(--color-neutral-3);

    .icon {
      margin-right: 12px;
      font-size: 16px;

      &:last-child {
        margin: 0;
      }
    }
  }

}

.activity {
  border-color: rgb(var(--arcoblue-4));
}

.curr {
  width: 96%;
  height: auto;
  border: none;
  box-shadow: none;
  padding: 0;
  border-radius: 0;
  margin: 0 auto 40px;
  padding-bottom: 10px;
  cursor: default;
  overflow: revert;

  .desc {
    width: 100%;
    margin: 10px 0;
    box-shadow: 0 0 3px #00000042;
  }
}

.group {
  .cell {
    margin-bottom: 10px;
  }
}

.promptType {
  margin-bottom: 20px;
  line-height: 45px;
}

.promptType button {
  margin-right: 10px;
}

.promptType .active {
  margin-right: 10px;
}
</style>
